Ext.define('ES.view.archives.DashBoard',{
	extend:'Ext.container.Container',
	alias:'widget.dashboard',
	requires:['Ext.layout.container.Table','ES.view.widgets.CustomCombo','ES.view.archives.ProjectStat','ES.view.archives.ProjectInterest','ES.view.archives.ProjectRating','ES.view.archives.UsesStats'],
	width:'100%',
	loadDashboardData:function(projectData){
		var projectCombo = Ext.ComponentQuery.query('customcombo[name=projects]')[0];
		projectCombo.getStore().loadData(projectData);
		projectCombo.select(projectCombo.getStore().data.items[0]);
	},
	updateProjectDashboard:function(record){
		Ext.ComponentQuery.query('component[ESName=projectNameHeading]')[0].update(record.get('projectName') + ' - ');
		var chartData = [{'name':'Downloads' + (record.get('downloads')),'data':record.get('downloads')},{'name':'Views' + (record.get('views')),'data':record.get('views')}];
		Ext.ComponentQuery.query('projectstat')[0].loadChartData(chartData);
		Ext.ComponentQuery.query('projectinterest')[0].loadInterestData(Math.floor(record.get('downloads')*100/record.get('views')));
		Ext.ComponentQuery.query('projectrating')[0].loadRatingData(record.get('avgRating'),record.get('nor'),record.get('views'));
		Ext.ComponentQuery.query('usesstats')[0].loadUsesStatsData(record.get('usesStats'));
		this.manageActionButtons(record.get('status'));
	},
	manageActionButtons:function(status){
		if(status == 'Active')
		{
			Ext.ComponentQuery.query('component[ESName=activate]')[0].setDisabled(true);
			Ext.ComponentQuery.query('component[ESName=deactivate]')[0].setDisabled(false);
			Ext.ComponentQuery.query('component[ESName=projectStatusHeading]')[0].update('<font color=green>Active</font>');
		}
		else
		{
			Ext.ComponentQuery.query('component[ESName=deactivate]')[0].setDisabled(true);
			Ext.ComponentQuery.query('component[ESName=activate]')[0].setDisabled(false);
			Ext.ComponentQuery.query('component[ESName=projectStatusHeading]')[0].update('<font color=red>InActive</font>');
		}
	},
	layout:{
		type:'vbox',
		defaultMargins:{top: 0, right: 0, bottom: 5, left: 0}
	},
	config:{
		projectStore:{}
	},
	initComponent:function(){
		this.projectStore = this.subCatStore = Ext.create('Ext.data.Store',{
			fields:['projectName','status','projectId','views','downloads','avgRating','nor','usesStats']
		});
		this.items = [
			{
				xtype:'container',
				layout:{
					type:'hbox',
					defaultMargins:{top: 0, right: 20, bottom: 0, left: 0}
				},
				items:[
					{
						xtype: 'customcombo',
		                name : 'projects',
		                store:this.projectStore,
		                displayField:'projectName',
		                valueField:'projectName',
		                labelWidth:150,
		                width:400,
		                labelAlign:'left',
		                queryMode: 'local',
		                fieldLabel: 'Select your project'
					},
					{
						xtype:'component',
						html:'Actions',
						style:{
							fontWeight:'bold',
							fontSize:12,
							color:'#6DB8E0'
						}
					},
					{
						xtype:'container',
						layout:{
							type:'hbox',
							defaultMargins:{top: 0, right: 5, bottom: 0, left: 0}
						},
						defaults:{
							style:{
								color:'#6E6E6E',
								textDecoration:'underline',
								cursor:'hand'
							}
						},
						items:[
							{
								xtype:'component',
								html:'Edit'
							},
							{
								xtype:'component',
								html:'Activate',
								ESName:'activate'
							},
							{
								xtype:'component',
								html:'De-Activate',
								ESName:'deactivate'
							},
							{
								xtype:'component',
								html:'Delete'
							},
						]
					}
				]
			},
			{
				xtype:'component',
				html:'<hr />',
				width:'100%'
			},
			{
				xtype:'container',
				layout:'hbox',
				width:'100%',
				items:[
					{
						xtype:'component',
						ESName:'projectNameHeading',
						html:'Project Name',
						style:{
							fontSize:15,
							fontWeight:'bold',
							color:'#6DB8E0'
						}
					},
					{
						xtype:'component',
						ESName:'projectStatusHeading',
						html:'Active',
						style:{
							fontSize:15,
							fontWeight:'bold',
							color:'#6DB8E0'
						}
					}	
				]
			},
			{
				xtype:'container',
				width:'100%',
				border:1,
				layout:{
					type:'hbox',
					align:'middle',
					pack:'center',
					defaultMargins:{top: 0, right: 5, bottom: 5, left: 5}
				},
				items:[
					{
						xtype:'container',
						border:1,
						style:{
							borderStyle:'solid',
							borderColor:'#CCCCCC'
						},
						width:'50%',
						height:150,
						items:[
							{
								xtype:'projectstat',
								width:'100%'
							}
						]
					},
					{
						xtype:'container',
						border:1,
						style:{
							borderStyle:'solid',
							borderColor:'#CCCCCC'
						},
						width:'50%',
						height:150,
						items:[
							{
								xtype:'projectinterest',
								width:'100%',
								height:150
							}
						]
					}
				]
			},
			{
				xtype:'container',
				width:'100%',
				border:1,
				layout:{
					type:'hbox',
					align:'middle',
					pack:'center',
					defaultMargins:{top: 0, right: 5, bottom: 5, left: 5}
				},
				items:[
					{
						xtype:'container',
						border:1,
						style:{
							borderStyle:'solid',
							borderColor:'#CCCCCC'
						},
						width:'50%',
						height:200,
						items:[
							{
								xtype:'usesstats'
							}
						]
					},
					{
						xtype:'container',
						border:1,
						style:{
							borderStyle:'solid',
							borderColor:'#CCCCCC'
						},
						width:'50%',
						height:200,
						items:[
							{
								xtype:'projectrating'
							}
						]
					}
				]
			}
		];
		this.callParent(arguments);
	}
});